<template>
  <div class="pages" v-cloak>
    <div class="pageLevel service-provider" v-if='!sub'>
      <!--   操作框     -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <div class='demo-ruleForm-block'>
            <el-form-item label="服务商类型：">
              <el-select v-model="searchData.serviceProviderTypeNumber" placeholder="服务商类型" style='width:200px' size='small' @change='selectChange'>
                <el-option label='全部' value=''></el-option>
                <el-option v-for='item in serviceProviderType' :label="item.serviceProviderTypeName" :value="item.serviceProviderTypeNumber" :key='item.serviceProviderTypeNumber'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服务商等级：">
              <el-select v-model="searchData.serviceProviderGradeNumber" placeholder="服务商等级" style='width:200px' size='small'>
                <el-option label='全部' value=''></el-option>
                <el-option v-for='item in serviceProviderGrade' :label="item.serviceProviderGradeName" :value="item.serviceProviderGradeNumber" :key='item.serviceProviderGradeNumber'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服务商名称：">
              <el-input class="input" v-model="searchData.name" size="small" placeholder="请输入商户名称"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="状态：">
              <el-select v-model="searchData.status" placeholder="状态" style='width:200px' size='small'>
                <el-option label='全部' value=''></el-option>
                <el-option v-for='item in statusList' :label="item.label" :value="item.value" :key='item.value'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" label-width="15px">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="getTabledata('1')">查询</el-button>
              <el-button type="primary" icon="el-icon-plus" size='mini' @click="routerPush('new')" key='add' v-if='setRole("新建")'>新增</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="80" align='center'></el-table-column>
          <el-table-column prop="name" align="center" label="服务商名称"></el-table-column>
          <el-table-column prop="serviceProviderTypeName" align="center" label="服务商类型"></el-table-column>
          <el-table-column prop="serviceProviderGradeName" align="center" label="服务商等级"></el-table-column>
          <el-table-column prop="desc" align="center" label="合作时间">
            <template slot-scope='scope'>
              <span v-if='scope.row.cooperateEndTime '>{{`${toDate(scope.row.cooperateStartTime)} —— ${toDate(scope.row.cooperateEndTime)}`}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="center" label="状态">
            <template slot-scope='scope'>
              <span v-if='scope.row.status != undefined'>{{scope.row.status ? '停用' : '启用'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="routerPush('see',scope.row.infoId)">查看</el-button>
              <el-button size="small" type="text" @click="routerPush('edit',scope.row.infoId)" v-if='setRole("修改")'>修改</el-button>
              <el-button type="text" size='small' @click="deleTable(scope.row.infoId, scope.row.serviceProviderTypeNumber)" v-if='setRole("删除")'>删除</el-button>
              <el-button size="small" type="text" @click="stopOrStart(scope.row)" v-if='setRole("停、启用") && scope.row.status != undefined'>{{scope.row.status ? '启用' : '停用'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageblock">
        <el-pagination @current-change="handleCurrentChange" :current-page="searchData.pageNum" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <template v-else>
      <router-view></router-view>
    </template>
  </div>
</template>
<script>
import util from "@/util";
import { mapState } from "vuex";
import {
  findServiceProviderList,
  addOrUpdateServiceProvider,
  deleteServiceProvider,
  findServiceProviderByTypeNumberList,
  findServiceProviderDetailsInfo,
  findServiceProviderTypeList,
  findServiceProviderGradeByTypeList,
  openOrCloseServiceProvider
} from "@/api";
export default {
  name: "serviceProvider-list",
  data() {
    return {
      serviceProviderType: [], //服务商类型列表
      serviceProviderGrade: [], //服务商等级列表
      statusList: [
        {
          label: "启用",
          value: 0
        },
        {
          label: "停用",
          value: 1
        }
      ], //状态列表
      searchData: {
        //模糊查询
        serviceProviderTypeNumber: "",
        serviceProviderGradeNumber: "",
        name: "",
        status: "",
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0
    };
  },
  computed: mapState(["merchantId", "sub", "power", "isReLoadData"]),
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getTabledata("1");
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getServiceTypeList();
    this.getTabledata("1");
  },
  methods: {
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    //服务商类型
    getServiceTypeList() {
      findServiceProviderTypeList().then(res => {
        if (res.code == 200) {
          this.serviceProviderType = res.data.list;
        }
      });
    },
    //服务商类型选择
    selectChange(val) {
      if (val) {
        this.getServiceGradeList(val);
        this.searchData.serviceProviderGradeNumber=''
      } else {
        this.serviceProviderGrade = [];
        this.searchData.serviceProviderGradeNumber=''
      }
    },
    //服务商等级
    getServiceGradeList(num) {
      let data = {
        serviceProviderTypeNumber: num
      };
      findServiceProviderGradeByTypeList(data).then(res => {
        if (res.code == 200) {
          this.serviceProviderGrade = res.data.list;
        } 
      });
    },
    //获取列表数据
    getTabledata(pageNum) {
      let data = JSON.parse(JSON.stringify(this.searchData));
      (data.shopId = this.merchantId), (data.pageNum = pageNum);
      findServiceProviderList(data).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.pageTotal;
        } 
      });
    },
    //停用或者启用
    stopOrStart(row) {
      //修改接口
      let status = row.status == 0 ? "1" : row.status == 1 ? "0" : "";
      let datas = {
        infoId: row.infoId,
        typeId: row.typeId,
        shopId: this.merchantId,
        serviceProviderTypeNumber: row.serviceProviderTypeNumber,
        serviceProviderGradeNumber: row.serviceProviderGradeNumber,
        status: status
      };
      openOrCloseServiceProvider(datas).then(res => {
        if (res.code == 200) {
          this.tips(res.msg, "success");
          this.getTabledata("1");
        } 
      });
    },
    handleSelectionChange() {},
    deleTable(id, typeNum) {
      let data = {
        infoId: id,
        serviceProviderTypeNumber: typeNum
      };
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showClose: false
      })
        .then(() => {
          //确定执行的操作
          deleteServiceProvider(data).then(res => {
            if (res.code == 200) {
              this.tips("删除成功", "success");
              this.getTabledata("1");
            }
          });
        })
        .catch(() => {
          //取消执行的操作
        });
    },
    handleCurrentChange(val) {
      this.getTabledata(val);
    },
    //时间戳转化
    toDate(num) {
      return util.foryear(num);
    },
    tips(tip, type) {
      this.$message({
        message: tip,
        type: type
      });
    },
    routerPush(handle, targetId = "") {
      util.routerTo(
        "/operate-management/serviceProvider-management/serviceProvider-list/serviceProvider-details",
        {
          handle: handle,
          targetId: targetId
        }
      );
    }
  }
};
</script>
<style>
[v-cloak] {
  display: none !important;
}
</style>
<style lang='less' scoped>
.pages {
  position: absolute;
  top: 70px;
  left: 11px;
  right: 11px;
  bottom: 10px;
  // overflow: auto;
}
.service-provider {
  .tableSearch {
    .demo-ruleForm {
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      .demo-ruleForm-block {
        .el-form-item {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
